﻿@page "/components/fileupload"
@page "/components/fileuploader"
@page "/components/MudFileUpload"
@page "/components/MudFileUpload`1"

<DocsPage>
    <DocsPageHeader Title="File Upload" Component="@nameof(MudFileUpload<T>)">
        <Description>
            <MudText Typo="@Typo.body1" Class="mt-4">
                To create a file upload button, two elements are needed: an activator (using the <CodeInline>ActivatorContent</CodeInline> parameter) and an <CodeInline>input</CodeInline>.
            </MudText>
            <br />
            <MudText Typo="@Typo.body1">
                The <CodeInline>MudFileUpload</CodeInline> component provides public <CodeInline>ClearAsync</CodeInline> and <CodeInline>OpenFilePickerAsync</CodeInline>
                methods that can be used as <CodeInline>OnClick</CodeInline> events for buttons.
            </MudText>
            <br />
            <MudText Typo="@Typo.body1">
                After uploading the files, you will receive an <CodeInline>IReadOnlyList&#60IBrowserFile&#62</CodeInline> or <CodeInline>IBrowserFile</CodeInline> and you will need to manually handle the upload in <CodeInline>HandleFilesChanged</CodeInline>.
                Instead of using <CodeInline>multiple</CodeInline> to allow multiple files, you set T to <CodeInline>IReadOnlyList&#60IBrowserFile&#62</CodeInline>. Using <CodeInline>IBrowserFile</CodeInline> restricts the component to a single file.
            </MudText>
            <br />
            <br />
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Use any type of MudButton">
                <Description>
                    Use a <CodeInline>MudButton</CodeInline>, a <CodeInline>MudIconButton</CodeInline> or a <CodeInline>MudFab</CodeInline> with the <CodeInline>ActivatorContent</CodeInline> render fragment.
                    A <CodeInline>MudFileUpload</CodeInline> can be <CodeInline>Disabled</CodeInline> and it will disable its child button automatically.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" ShowCode="false" Code="@nameof(FileUploadButtonExample)">
                <FileUploadButtonExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Multiple and Accept">
                <Description>
                    Allow multiple files with <CodeInline>T="IReadOnlyList&#60IBrowserFile&#62"</CodeInline> or limit the valid file types with <CodeInline>Accept</CodeInline>.
                    To upload more than 10 files, you must specify a <CodeInline>MaximumFileCount</CodeInline>.

                    <MudAlert Class="my-3"
                              Dense
                              Severity="Severity.Info">
                        Note: Some browsers or platforms may require specific values for the <CodeInline>Accept</CodeInline> attribute.
                        <br>
                        <br>
                        In MAUI using an Android device for example, you should use <CodeInline>Accept="image/png, image/jpg"</CodeInline> rather than <CodeInline>Accept=".png, .jpg"</CodeInline>.
                        <br>
                        Refer to the <a href="https://learn.microsoft.com/dotnet/maui/platform-integration/storage/file-picker?view=net-maui-8.0&tabs=android#platform-differences">MAUI docs</a> for more information.
                    </MudAlert>
                </Description>

            </SectionHeader>
            <SectionContent DarkenBackground="true" ShowCode="false" Code="@nameof(FileUploadMultipleAcceptExample)">
                <FileUploadMultipleAcceptExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Form Validation">
                <Description>
                    Use the <CodeInline>For</CodeInline> property to validate your files within a form, and bind your files to your model class using <CodeInline>&#64;bind-Files</CodeInline>.
                    You can then handle the file upload logic within your <CodeInline>MudForm</CodeInline> submit method.
                    The component provides a public <CodeInline>ClearAsync</CodeInline> method that you can use as <CodeInline>OnClick</CodeInline> handler for a button to clear files and update the form state.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" ShowCode="false" Code="@nameof(FileUploadValidationExample)">
                <FileUploadValidationExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Event Options">
                <Description>
                    You can use either <CodeInline>Files</CodeInline> and <CodeInline>FilesChanged</CodeInline> or the <CodeInline>OnFilesChanged</CodeInline> callback.
                    The former is better when used within a <CodeInline>MudForm</CodeInline>, and the latter is better for custom scenarios.
                    When using <CodeInline>OnFilesChanged</CodeInline>, it will fire regardless of validation by default, but can be configured to only fire when valid using <CodeInline>SuppressOnChangeWhenInvalid</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" ShowCode="false" Code="@nameof(FileUploadEventOptionsExample)">
                <FileUploadEventOptionsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="SelectedTemplate">
                <Description>
                    You can use the <CodeInline>SelectedTemplate</CodeInline> RenderFragment to display the current files.
                    Its <CodeInline>&#64;context</CodeInline> parameter matches <CodeInline>T</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" ShowCode="false" Code="@nameof(FileUploadSelectedTemplateExample)">
                <FileUploadSelectedTemplateExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Append Multiple Files">
                <Description>
                    With <CodeInline>AppendMultipleFiles</CodeInline> set to true, when additional files are selected they will be appended to the existing list.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" ShowCode="false" Code="@nameof(FileUploadAppendMultipleExample)">
                <FileUploadAppendMultipleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Drag and Drop Example">
                <Description>Using the examples below, you can compose a drag-and-drop uploader.</Description>
            </SectionHeader>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="Custom Scenario">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" ShowCode="false" Code="@nameof(FileUploadDragAndDropCustomScenarioExample)">
                        <FileUploadDragAndDropCustomScenarioExample />
                    </SectionContent>
                </DocsPageSection>
                <DocsPageSection>
                    <SectionHeader Title="With Form Validation">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" ShowCode="false" Code="@nameof(FileUploadDragAndDropWithFormValidationExample)">
                        <FileUploadDragAndDropWithFormValidationExample />
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
